<template>
	<view>
		<!-- 第一部分 -->
		<view class="items">
			<view class="item">
				<view class="item-xs">推荐</view>
				<view class="item-x">千里眼</view>
				<view class="item-x">搞笑</view>
				<view class="item-x">娱乐</view>
				<view class="item-x">社会</view>
				<view class="item-x">音乐</view>
				<view class="item-x">科技</view>
			</view>
		</view>
		<view class="item-ss"></view>
		<!-- 第二部分-视频1 -->
		<view class="sp">
			<navigator url="../videocontent/videoconntent">
				<view class="x">
					600斤公牛不甘心被杀，宁愿跳进大海之中，结局令人遗憾
				</view>
			</navigator>
			<video style="width: 100%;height: 400rpx;" class="y"
				src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image src="../../../static/logo.png" style="width: 45rpx;height: 45rpx;"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">
						开心哈哈大笑...
					</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #dd524d; font-weight: bold;">
						关注
					</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频2 -->
		<view class="sp">
			<navigator url="../videocontent/videoconntent">
				<view class="x">
					这些箱子里装的中高档卷烟共有1350余条、27万余支
				</view>
			</navigator>
			<video style="width: 100%;height: 400rpx;" class="y"
				src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image src="../../../static/logo.png" style="width: 45rpx;height: 45rpx;"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">
						往事随风飘去...
					</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #dd524d; font-weight: bold;">
						关注
					</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频3 -->
		<view class="sp">
			<navigator url="../videocontent/videoconntent">
				<view class="x">
					一个"背包客"，从郑州坐火车往返江南某市...
				</view>
			</navigator>
			<video style="width: 100%;height: 400rpx;" class="y"
				src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image src="../../../static/logo.png" style="width: 45rpx;height: 45rpx;"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">
						微笑面对一切...
					</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #dd524d; font-weight: bold;">
						关注
					</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频4 -->
		<view class="sp">
			<navigator url="../videocontent/videoconntent">
				<view class="x">
					原来，4月24日，该局执法人员奔赴江南某市，在江南某市火车站
				</view>
			</navigator>
			<video style="width: 100%;height: 400rpx;" class="y"
				src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image src="../../../static/logo.png" style="width: 45rpx;height: 45rpx;"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">
						每天开开心心...
					</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #dd524d; font-weight: bold;">
						关注
					</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
		<!-- 第二部分-视频5 -->
		<view class="sp">
			<navigator url="../videocontent/videoconntent">
				<view class="x">
					新郑市烟草与公安部门顺藤摸瓜，连夜驱车奔赴江南某市
				</view>
			</navigator>
			<video style="width: 100%;height: 400rpx;" class="y"
				src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image src="../../../static/logo.png" style="width: 45rpx;height: 45rpx;"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">
						一起来玩耍吧...
					</view>
					<view class="wenzizf" style="color: #999999; margin-top: 0rpx;"></view>
					<view class="wenzizf" style="font-size: 32rpx;color: #dd524d; font-weight: bold;">
						关注
					</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.items {
		background-color: #ffffff;
		position: fixed;
		z-index: 1;
		width: 100%;
		/* top: 90rpx; */
	}

	.item {
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		margin: 5rpx 10rpx 20rpx 10rpx;
		font-size: 40rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.item-ss {
		width: 100%;
		height: 60rpx;
	}

	.tab_title view {
		display: inline-block;
		margin-left: 30rpx;
		line-height: 30rpx;
		color: #ffffff;
	}

	.dibu {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}

	.wenzi {
		display: flex;
		flex-direction: row;
	}

	.tupian {
		display: flex;
		flex-direction: row;
	}

	.tupiandx {
		margin-left: 60rpx;
	}

	.wenzizf {
		margin-right: 20rpx;
	}

	.x {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.item-xs {
		color: #dd524d;
		font-weight: bold;
	}

	.a {
		margin-right: 120rpx;
		height: 50rpx;
	}

	.ap image {
		width: 250rpx;
		height: 100rpx;
	}

	.ap {
		border-radius: 10rpx;
		width: 250rpx;
		height: 100rpx;
		overflow: hidden;
		margin: auto;
	}

	.b {}

	.scroll_x {
		height: 50rpx;
		width: 100%;
		white-space: nowrap;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #ffffff;
		border-bottom: 1rpx solid #c8c7cc;
	}

	.tab_title {
		display: inline-block;
		margin-left: 10rpx;
		height: 80rpx;
		line-height: 70rpx;
		color: #333333;
		background-color: #ffffff;
		border-bottom: 1rpx solid #c8c7cc;
	}

	.tab-x {
		color: #333333;
		background-color: #ffffff;
	}

	.scroll_x {
		height: 60rpx;
		width: 100%;
		white-space: nowrap;
	}

	.gray {
		color: #c8c7cc;
	}

	.gray1 {
		color: #dd524d;
	}

	.hd {
		display: inline-block;
	}

	.tab {
		background-color: #dd524d;
	}

	.shgd {
		position: fixed;
		position: absolute;
		z-index: 1;
	}

	scroll-view::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.sp {
		border-bottom: 1rpx solid #e5eaf3;
		margin: 10rpx 10rpx 20rpx 20rpx;
	}

	.reg-right {
		color: #dd524d;
		margin-right: 10rpx;
		padding-left: 10rpx;
	}

	.z {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		height: 70rpx;
	}

	.zs {
		display: flex;
	}

	.z1 {
		margin-bottom: 10rpx;
		margin-right: 300rpx;
		margin-top: 20rpx;
	}

	.z-h {
		height: 60rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: row;
		font-size: 35rpx;
	}

	.z-z {
		font-size: 30rpx;
		color: #c8c7cc;
	}

	.z-z1 {
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}

	.z-z2 {
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}

	.y {
		margin: 0rpx;
		flex: 1;
	}
</style>
